<template>
    <div class="editor-header">
        <div class="super-editor-button-box" @click="handleClick" v-show="buttonShow">
            <el-icon>
                <ArrowRightBold />
            </el-icon>
        </div>
        <div class="super-editor-title">编辑器</div>
    </div>
    <element-tiptap v-model:content="content" v-model:id="props.chatItemId" :extensions="extensions" output="text" :tooltip="false" />
</template>
  
<script setup>
import { ref, watch, inject } from 'vue'
import {
    Doc, Bold, Italic, Underline, Strike, Text, Paragraph, Heading, Link, SelectAll, Chat, Save,
    BulletList, OrderedList, Color, FontSize, History, AI, Image, Publish, Yuanwen, Ocr, Fullscreen,Delete
} from '@/index'

import HardBreak from '@tiptap/extension-hard-break'
import Placeholder from '@tiptap/extension-placeholder'
import { ocrImg } from '@/api/plugin'
import { uploadImg } from '@/api/post'
const uploadRequest = (file) => {
    let uploadForm = new FormData()
    uploadForm.append('img', file)
    return uploadImg(uploadForm)
}

// const ocrRequest = (file) => {
//     let uploadForm = new FormData()
//     uploadForm.append('img', file)
//     return ocrImg(uploadForm)
// }
const extensions = [
    History,
    Doc,
    Text,
    Paragraph,
    Heading.configure({ level: 5, bubble: true }),
    Bold.configure({ bubble: true }), // render command-button in bubble menu.
    Underline.configure({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
    Italic,
    Strike,
    BulletList,
    OrderedList,
    Color,
    FontSize,
    Image.configure({ bubble: true, uploadRequest: uploadRequest }),
    // Fullscreen,
    HardBreak,
    Link,
    AI.configure({ bubble: true }),
    Publish,
    Yuanwen.configure({ bubble: true }),
    Chat,
    Placeholder.configure({
        placeholder: '请输入标题 …',
    },
        SelectAll,
    ),
    Save,
    Delete
    // Ocr.configure({bubble:true,orcRequest:ocrRequest}),

];

const content = ref('')
const props = defineProps({
    content: {
        type: String,
        default: ''
    },
    action: {
        type: String,
        default: 'edit'
    },
    chatItemId: {
        type: String,
        default: ''
    }
})

const emit = defineEmits(['update:content', 'update:action'])

watch(
    () => props.content,
    (newVal, oldVal) => {
        content.value = newVal
    }
)

watch(content, () => {
    emit('update:content', content.value)
})

const buttonShow = ref(false)
watch(
    () => props.action,
    (newVal, oldVal) => {
        if (newVal === 'edit') {
            buttonShow.value = false
        } else {
            buttonShow.value = true
        }
    }
)

const setLayout = inject('setLayout')
const handleClick = () => {
    setLayout()

}

</script>

<style scoped>
.el-tabs__content {
    height: calc(100vh - var(--supereditor-header-height)) !important;

}

.editor-header {
    height: var(--supereditor-header-height);
    line-height: var(--supereditor-header-height);
    display: flex;
    align-items: center;
    padding-left: 5px;
    gap: 10px;
    font-size: large;
    font-weight: bold;
}

.super-editor-title {
    padding-left: 5px;
}

.editor-footer{
    height: 30px;
    border-top: 1px solid #dcdfe6;
}
</style>